﻿@page "/mixed"

<h3>Mixed graphs</h3>

<Chart Config="_config1" @ref="_chart1" Height="400px"></Chart>

<hr />

<h3>Code</h3>

<p>
    This is the component to add in your page.
</p>

<CodeSnippet Language="Language.xml" Style="Style.VisualStudio">
    &ltChart Config="_config1" &#64;ref="_chart1">&lt;Chart>
</CodeSnippet>

<p>
    Then, in the code section, add the following code:
</p>

<CodeSnippet Language="Language.csharp" Style="Style.VisualStudio" LoadMainScript="false">
private BarChartConfig? _config1;
private Chart? _chart1;

_config1 = new BarChartConfig()
    {
        Options = new Options()
        {
            Responsive = true,
            MaintainAspectRatio = false,
            Plugins = new Plugins()
            {
                Title = new Title()
                {
                    Display = true,
                    Text = "Population growth (millions): Europe & Africa"
                },
                Legend = new Legend()
                {
                    Display = false
                }
            }
        }
    };

_config1.Data.Labels = new List&lt;string>() { "1900", "1950", "1999", "2050" };
_config1.Data.Datasets.Add(new BarDataset()
    {
        Label = "Europe",
        Type = "line",
        Data = new List&lt;decimal>() { 408, 547, 675, 734 },
        BorderColor = new List&lt;string>() { "#8e5ea2" },
        Fill = false
    });
_config1.Data.Datasets.Add(new BarDataset()
    {
        Label = "Africa",
        Type = "line",
        Data = new List&lt;decimal>() { 133, 221, 783, 2478 },
        BorderColor = new List&lt;string>() { "#3e95cd" }
    });
_config1.Data.Datasets.Add(new BarDataset()
    {
        Label = "Europe",
        Type = "bar",
        Data = new List&lt;decimal>() { 408, 547, 675, 734 },
        BackgroundColor = new List&lt;string>() { "rgba(0,0,0,0.2)" }
    });
_config1.Data.Datasets.Add(new BarDataset()
    {
        Label = "Africa",
        Type = "bar",
        Data = new List&lt;decimal>() { 133, 221, 783, 2478 },
        BackgroundColor = new List&lt;string>() { "rgba(0,0,0,0.2)" },
        HoverBackgroundColor = new List&lt;string>() { "#3e95cd" }
    });
</CodeSnippet>

@code {
    private BarChartConfig? _config1;
    private Chart? _chart1;

    protected override async Task OnInitializedAsync()
    {
        _config1 = new BarChartConfig()
            {
                Options = new Options()
                {
                    Responsive = true,
                    MaintainAspectRatio = false,
                    Plugins = new Plugins()
                    {
                        Title = new Title()
                        {
                            Display = true,
                            Text = "Population growth (millions): Europe & Africa"
                        },
                        Legend = new Legend()
                        {
                            Display = false
                        }
                    }
                }
            };

        _config1.Data.Labels = new List<string>() { "1900", "1950", "1999", "2050" };
        _config1.Data.Datasets.Add(new BarDataset()
            {
                Label = "Europe",
                Type = "line",
                Data = new List<decimal?>() { 408, 547, 675, 734 },
                BorderColor = new List<string>() { "#8e5ea2" },
                Fill = false
            });
        _config1.Data.Datasets.Add(new BarDataset()
            {
                Label = "Africa",
                Type = "line",
                Data = new List<decimal?>() { 133, 221, 783, 2478 },
                BorderColor = new List<string>() { "#3e95cd" }
            });
        _config1.Data.Datasets.Add(new BarDataset()
            {
                Label = "Europe",
                Type = "bar",
                Data = new List<decimal?>() { 408, 547, 675, 734 },
                BackgroundColor = new List<string>() { "rgba(0,0,0,0.2)" }
            });
        _config1.Data.Datasets.Add(new BarDataset()
            {
                Label = "Africa",
                Type = "bar",
                Data = new List<decimal?>() { 133, 221, 783, 2478 },
                BackgroundColor = new List<string>() { "rgba(0,0,0,0.2)" },
                HoverBackgroundColor = new List<string>() { "#3e95cd" }
            });
    }
}